<template>
  <view
    class="swiper-action"
    @touchstart="touchstartHandle"
    @touchend="touchendHandle"
  >
    <slot></slot>
  </view>
</template>

<script>
export default {
  props: {
    ope_diraction: {
      type: Boolean,
      default: true, // true 代表左右滑动，false代表上下滑动
    },
  },
  data() {
    return {
      startX: 0,
      startY: 0,
      startTime: 0,
    };
  },
  methods: {
    // 手指触摸屏幕触发
    touchstartHandle(e) {
      //   console.log("按下：" + e.changedTouches[0].clientX);
      //   console.log("按下：" + e.changedTouches[0].clientY);
      this.startX = e.changedTouches[0].clientX;
      this.startY = e.changedTouches[0].clientY;
      this.startTime = Date.now();
    },
    // 手指离开屏幕触发
    touchendHandle(e) {
      //   console.log("离开：" + e.changedTouches[0].clientX);
      //   console.log("离开：" + e.changedTouches[0].clientY);
      let endX = e.changedTouches[0].clientX;
      let endY = e.changedTouches[0].clientY;
      let endTime = Date.now();
      let direction = ""; // 最终滑动的方向

      if (endTime - this.startTime > 2000) {
        // 当大于2秒后不构成滑动
        return;
      }

      // 代表需要左右滑动
      if (this.ope_diraction) {
        if (
          Math.abs(endX - this.startX) < 10 ||
          Math.abs(endY - this.startY) > 20
        ) {
          // 左右滑动的距离太小 或者 上下的距离太大 都不行
          return;
        }

        // 判断是左滑还是右滑
        direction = endX > this.startX ? "右滑" : "左滑";
      } else {
        // 代表需要上下滑动
        if (
          Math.abs(endX - this.startX) > 10 ||
          Math.abs(endY - this.startY) < 10
        ) {
          return;
        }

        direction = endY > this.startY ? "下滑" : "上滑";
      }

      this.$emit("swiperAction", {
        direction,
      });
    },
  },
};
</script>

<style></style>
